<template>
  <div class="fxBox">
    <div class="fxBox__top">
      <el-radio-group v-model="chooseRadio" @change="selectRadio">
        <el-radio label="0">不使用会员价</el-radio>
        <el-radio label="1">固定金额</el-radio>
        <el-radio label="2">百分比</el-radio>
        <el-radio label="3">统一设置</el-radio>
      </el-radio-group>
      <div class="fxBox__top--tip">
        不使用会员价即该商品不参与会员折扣，设置后启用单品折扣
      </div>
    </div>
    <div class="fxBox__list" v-if="chooseRadio === '1' || chooseRadio === '2'" :style="{
        height: goodQuery.skuStocks.length > 1 ? '400px' : '140px',
      }">
      <div class="fxBox__list--firLine" :style="{ width: memberList.length > 3 ? '' : '100%' }">
        <div class="vipItem" v-if="goodQuery.skuStocks.length > 1">规格值</div>
        <div class="vipItem">实售价</div>
        <div class="vipItem">指导价</div>
        <div v-for="(item, index) in memberList" :key="index" style="width: 122px; margin: 0px 15px">
          {{ item.rankName }}
        </div>
      </div>
      <div class="fxBox__list--skuLine" :style="{
          height: goodQuery.skuStocks.length > 4 ? '273px' : '',
          width: memberList.length > 3 ? '' : '100%',
        }">
        <div v-for="(item, index) in goodQuery.skuStocks" :key="index" class="skuLine" :style="{
            width: memberList.length > 3 ? '' : '100%',
            borderBottom: memberList.length > 1 ? '1px solid #ebedf1' : 'none',
          }">
          <div class="skuLine__name" v-if="goodQuery.skuStocks.length > 1">
            {{ item.specs }}
          </div>
          <div class="skuLine__center" style="width: 70px">
            ￥{{ item.price }}
          </div>
          <div class="skuLine__center" style="width: 180px">
            ￥{{ item.originalPrice }}
          </div>
          <div v-for="(v, i) in item.memberPrices" :key="i" class="vipLine">
            <!-- @blur="validPrice($event, index, i)" -->
            <el-input-number :min="0" :controls="false" v-model="v.memberPrice" style="width: 120px; margin: 0px 10px">
              <div slot="append">{{ chooseRadio === "1" ? "元" : "%" }}</div>
            </el-input-number>
          </div>
        </div>
      </div>
      <div class="fxBox__list--firLine" v-if="goodQuery.skuStocks.length > 1" style="
          padding-right: 20px;
          margin-top: 20px;
          position: absolute;
          left: 0px;
          bottom: 0px;
        " :style="{
          width: memberList.length > 3 ? '' : '100%',
          paddingRight: memberList.length > 3 ? '60px' : '20px',
        }">
        <div style="display: flex; width: 353px; align-items: center">
          <div style="margin-right: 10px">批量设置</div>
          <el-switch v-model="setValue" active-color="#006EFF" inactive-color="#D7D7D7" @change="control"></el-switch>
        </div>
        <div v-for="(item, index) in memberList" :key="index" class="vipLine">
          <el-input-number :min="0" :controls="false" v-model="item.memberPrice" style="width: 125px; margin: 0px 13px"
            @blur="setByAll($event, index)">
            <div slot="append">{{ chooseRadio === "1" ? "元" : "%" }}</div>
          </el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { getAllTagsVipLevel } from "@/api/customer/customer";

@Component
export default class MemberSet extends Vue {
  @Prop()
  currentGood: any;

  @Prop()
  memberFlag: any;

  goodQuery = {} as any;

  /** 会员卡等级列表 */
  memberList = [];

  /** 顶部tag */
  chooseRadio = "0";

  setValue = false;

  @Watch("memberFlag")
  memberFlagChange() {
    if (this.memberFlag) {
      this.setValue = false;
      this.init();
    }
  }

  mounted() {
    this.init();
  }

  init() {
    this.goodQuery = JSON.parse(JSON.stringify(this.currentGood));
    const goodQuery = this.goodQuery;
    getAllTagsVipLevel().then((res) => {
      goodQuery.skuStocks.forEach((skuItem) => {
        if (skuItem.memberPrices.length === 0) {
          this.chooseRadio = String(skuItem.memberType);
          skuItem.memberPrices = [];
          res.data.forEach((vipItem) => {
            vipItem.memberPrice = null;
            // if (vipItem.isOpen) {
            skuItem.memberPrices.push({
              memberLevelId: vipItem.rankCode,
              memberLevelName: vipItem.rankName,
              memberPrice: null,
              productId: goodQuery.id,
              skuId: skuItem.id,
            });
            // }
          });
        } else {
          const newQuery = goodQuery;
          const newList = [] as any;
          const vipList = [] as any;
          newQuery.skuStocks.forEach((skuItem) => {
            skuItem.memberPrices.forEach((memItem) => {
              newList.push(memItem.memberLevelId);
            });
          });

          res.data.forEach((vipItem) => {
            vipList.push(vipItem.rankCode);
          });
          const differenceList = vipList
            .filter((x) => newList.indexOf(x) == -1)
            .concat(newList.filter((x) => vipList.indexOf(x) == -1));

          const addList = [] as any;
          res.data.forEach((vipItem) => {
            differenceList.forEach((difItem) => {
              if (vipItem.rankCode === difItem) {
                addList.push(vipItem);
              }
            });
          });
          goodQuery.skuStocks.forEach((skuItem) => {
            addList.forEach((vipItem) => {
              vipItem.memberPrice = null;
              if (
                skuItem.memberPrices.length != res.data.length &&
                skuItem.memberPrices.length != 0
              ) {
                // if (vipItem.isOpen) {
                skuItem.memberPrices.push({
                  memberLevelId: vipItem.rankCode,
                  memberLevelName: vipItem.rankName,
                  memberPrice: null,
                  productId: goodQuery.id,
                  skuId: skuItem.id,
                });
                // }
              }
            });
            // res.data.forEach(vipList => {
            //   skuItem.memberPrices.forEach((memItem, index) => {
            //     if (memItem.id) {
            //       // !vipList.isOpen &&
            //       if (memItem.memberLevelId === vipList.rankCode) {
            //         skuItem.memberPrices.splice(index, 1);
            //       }
            //     }
            //   });
            // });
          });

          res.data.forEach((item) => {
            item.memberPrice = null;
          });
          this.chooseRadio = String(goodQuery.skuStocks[0].memberType);
        }
      });
      this.memberList = res.data;
    });
  }

  /**
   * 批量设置开关
   */
  control() {
    this.memberList.forEach((item) => {
      item.memberPrice = null;
    });
  }

  /**
   * 批量设置
   */
  setByAll(e, index) {
    if (!this.setValue) {
      return;
    }
    this.goodQuery.skuStocks.forEach((skuItem) => {
      skuItem.memberPrices.forEach((memItem, memIndex) => {
        if (memIndex === index) {
          memItem.memberPrice = e.target.value;
        }
      });
    });
  }

  selectRadio() {
    this.goodQuery.skuStocks.forEach((item) => {
      item.memberPrices.forEach((memItem) => {
        memItem.memberPrice = null;
      });
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(fxBox) {
  margin-top: 0px;
  @include e(top) {
    display: flex;
    align-items: center;
    @include m(tip) {
      font-size: 12px;
      margin-left: 40px;
      color: #aeaeae;
    }
  }

  @include e(list) {
    margin-top: 20px;
    height: 400px;
    border: 1px solid #ebedf1;
    width: 834px;
    overflow-x: auto;
    display: -webkit-box;
    position: relative;

    @include m(firLine) {
      height: 50px;
      display: flex;
      align-items: center;
      padding-left: 25px;
      padding-right: 30px;
      background-color: #f2f4f7;
      @include m(vip) {
        width: 450px;
        display: flex;
      }
      .vipItem {
        margin-right: 46px;
        width: 80px;
        display: flex;
      }
    }

    @include m(skuLine) {
      position: absolute;
      top: 55px;
      left: 0px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // width: 100%;
      overflow: auto;

      .skuLine {
        display: flex;
        align-items: center;
        // margin-bottom: 20px;
        // padding-bottom: 20px;
        border-bottom: 1px solid #ebedf1;
        padding-right: 33px;
        height: 70px;

        &__name {
          width: 130px;
          display: flex;
          justify-content: flex-start;
          padding-left: 25px;
        }

        &__center {
          display: flex;
          justify-content: center;
        }
      }

      .vipLine {
        display: flex;
        width: 150px;
        justify-content: center;
      }
    }
  }
}
.fxBox__list--skuLine::-webkit-scrollbar {
  display: none;
}
// .fxBox__list--firLine--vip::-webkit-scrollbar {
//   // display: none;
//   height: 2px;
//   padding-top: 5px;
// }
</style>
